<template>
   <el-container class="index">
    <el-header>
      <div class="logo">
        <img src="../assets/logo.png" alt="">
      </div>
     <div class="title">
        <h1>电商后台管理系统</h1>
     </div>
     <div class="logout">
       欢迎光临~
       <a href="javascript:;" @click='logout'>退出</a>
     </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
            <el-menu
            router
        unique-opened
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">

        <el-submenu :index="menu.path" v-for='menu in menuList' :key="menu.id">
            <!-- 标题 -->
            <template v-slot:title>
                <i class="el-icon-location"></i>
                <span>{{ menu.authName }}</span>
            </template>

            <el-menu-item :index="item.path" v-for='item in menu.children' :key="item.id">
                <i class="el-icon-menu"></i>
                <span slot="title">{{ item.authName }} </span>
            </el-menu-item>
        </el-submenu>

    </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

export default {

  data () {
    return {
      menuList: []
    }
  },

  created () {
    this.$axios.get('menus', {
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }).then(res => {
      const { data, meta } = res
      if (meta.status === 200) {
        this.menuList = data
        console.log(this.menuList)
      } else {
        this.$message.error(meta.msg)
      }
    })
  },

  methods: {
    logout () {
    // this.$confirm
    // 参数1: 提示消息
    // 参数2: 标题
    // 参数3: 配置对象
      this.$confirm('亲，你确认要退出系统吗?', '温馨提示', {
        type: 'warning'
      }).then(() => {
      // 确认提示
        this.$message.success('恭喜，退出成功')
        // 从本地清楚token
        localStorage.removeItem('token')
        // 跳转登录路由
        this.$router.push('/login')
      }).catch(() => {
      // 取消
        this.$message('取消退出')
      })
    }
  }
}
</script>

<style lang= 'less' scoped>
.index{
 height: 100%;
 .el-header{
   background-color: #d8d8d8;
   display: flex;
   .logo{
    width: 180px;
    img{
       height: 40px;
       margin: 10px;
    }
   }
   .title{
     flex: 1;
     h1{
       text-align: center;
       height: 60px;
       line-height: 60px;
       color:#545c64;
     }
   }
   .logout{
     height: 60px;
     line-height: 60px;
     text-align: right;
     font-weight: 700;
     width: 180px;
     a{
       color:orange;
     }
   }
 }
 .el-aside{
    background-color: #545c64;
 }
  .el-main {
    background-color: #ecf0f1;
  }
}
</style>
